<template>
  <div class="channel-page">
    <!-- v-model="channel_id" -->
    <el-select :value="value" @change="changeChannel" clearable  placeholder="请选择">
      <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<script>
import { channel } from '@/api/article'
export default {
  name: 'Channel',
  props: ['value'],
  data () {
    return {
      // channel_id: null,
      channelList: []
    }
  },
  mounted () {
    this.getChannels()
  },
  methods: {
    // 频道改变的时候
    changeChannel (current) {
      // 当清除的时候把null赋值给它，防止报错
      if (!current) {
        current = null
      }
      // 通知父组件，并把当前选中的值传递过去
      this.$emit('input', current)
    },
    // 获取频道
    async getChannels () {
      const { data: { data } } = await channel()
      // console.log(data.channels)
      this.channelList = data.channels
    }
  }
}
</script>

<style lang="less" scoped>

</style>
